<template>
	<view class="user_info_page">
	    <view class="bgc_wrap">
	        <image class="bgc_img" mode="aspectFill" :src="userInfo.avatar_url"></image>
	    </view>
	    <view class="brief_userinfo_wrap">
	        <image class="avatar" mode="aspectFill" :src="userInfo.avatar_url"></image>
	        <view class="info_wrap">
	            <view class="username">{{userInfo.name}}</view>
	            <view class="user_brief">{{userInfo.bio}}</view>
	        </view>
	    </view>
	    <view class="detail_info">
	        <van-tabs :active="0" color="#397BFF" tab-class="tab_normal" tab-active-class="tab_active" :ellipsis="false" swipeable animated>
	            <van-tab title="基本信息">
	                <view class="user_info_wrap">
	                    <view class="title">个人信息</view>
	                    <view class="info_item">
	                        <van-icon class="info_icon" name="diamond-o" />
	                        <view class="info_value">{{userInfo.nickname}}</view>
	                    </view>
	                    <view class="info_item">
							<van-icon class="info_icon" name="flower-o" />
	                        <view class="info_value">{{userInfo.age}}</view>
	                    </view>
	                    <view class="info_item">
	                        <van-icon class="info_icon" name="envelop-o" />
	                        <view class="info_value">{{ userInfo.email }}</view>
	                    </view>
	                </view>
	            </van-tab>
	            <van-tab title="创作">
					<template v-for="item in userPost" :key="item.id">
						<PostItem :post="item" />
					</template>
	            </van-tab>
	        </van-tabs>
	    </view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
	
import useUserStore from '@/store/user.js'
import usePostStore from '@/store/post.js'
import PostItem from '@/components/post-item/post-item.vue'

const userStore = useUserStore()
const postStore = usePostStore()
const { userInfo } = storeToRefs(userStore)
const { userPost } = storeToRefs(postStore)
const userId = ref('')
onLoad((options) => {
	const { user_id } = options
	userId.value = user_id
})
onShow(() => {
	userStore.queryUserInfoByUserId(userId.value)
	postStore.queryPostsByUserIdAction(userId.value)
})


</script>

<style lang="less">
.user_info_page {
    width: 100%;

    .bgc_wrap {
        width: 100%;
        position: relative;
        height: 400rpx;

        .bgc_img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .bgc_options {
            position: absolute;
            right: 50rpx;
            bottom: 50rpx;
            display: flex;

            .option_item {
                margin-left: 20rpx;
                padding: 5rpx 20rpx;
                font-size: 30rpx;
                font-weight: 700;
                color: rgba(255, 255, 255, .8);
                border-radius: 30rpx;
                background-color: rgba(255, 255, 255, .4);

            }
        }
    }

    .brief_userinfo_wrap {
        width: 100%;
        position: relative;
        padding: 0 30rpx;
        display: flex;
        background-color: #fff;

        .avatar {
            width: 130rpx;
            height: 130rpx;
            border-radius: 50%;
            border: 5rpx solid #fff;
            margin-top: -50rpx;
            z-index: 99;
        }

        .info_wrap {
            padding: 20rpx;

            .username {
                font-size: 30rpx;
                font-weight: 700;
                margin-bottom: 5rpx;
            }

            .user_brief {
                font-size: 27rpx; 
         
            }
        }
    }

    .detail_info {
        .user_info_wrap {
            margin: 30rpx;
            background-color: #fff;
            border-radius: 15rpx;
            padding: 30rpx;

            .title {
                margin-bottom: 30rpx;
                font-weight: 700;
                font-size: 32rpx;
            }

            .info_item {
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                .info_icon {
                    color: #000;
                    font-size: 50rpx;
                    padding-right: 20rpx;
                    font-weight: 700;
                }

                .info_value {
                    font-size: 28rpx;

                }

            }
        }
    }
}
</style>
